<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="max-age=86400, public">
    <meta name="description" content="全民健康信息平台 - 平台文档">
    <title>平台文档 - 全民健康信息平台</title>
    <style>
        :root {
            --primary-color: #2563eb;
            --secondary-color: #1e40af;
            --text-color: #1f2937;
            --light-bg: #f3f4f6;
            --sidebar-width: 280px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: flex;
            min-height: 100vh;
        }

        .header {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .sidebar {
            width: var(--sidebar-width);
            background-color: white;
            border-right: 1px solid #e5e7eb;
            position: fixed;
            top: 76px;
            bottom: 0;
            overflow-y: auto;
            padding: 2rem 0;
        }

        .sidebar-content {
            padding: 0 1.5rem;
        }

        .sidebar-section {
            margin-bottom: 2rem;
        }

        .sidebar-section h3 {
            color: var(--text-color);
            font-size: 1rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .sidebar-links {
            list-style: none;
        }

        .sidebar-links li {
            margin-bottom: 0.5rem;
        }

        .sidebar-links a {
            color: #4b5563;
            text-decoration: none;
            font-size: 0.95rem;
            display: block;
            padding: 0.5rem 0;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .sidebar-links a:hover {
            color: var(--primary-color);
            background-color: #f3f4f6;
        }

        .sidebar-links a.active {
            color: var(--primary-color);
            background-color: #eff6ff;
            font-weight: 500;
        }

        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            margin-top: 76px;
            padding: 2rem;
            max-width: calc(100% - var(--sidebar-width));
        }

        .doc-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .doc-content h1 {
            font-size: 2.5rem;
            color: var(--text-color);
            margin-bottom: 1.5rem;
        }

        .doc-content h2 {
            font-size: 2rem;
            color: var(--text-color);
            margin: 2rem 0 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .doc-content h3 {
            font-size: 1.5rem;
            color: var(--text-color);
            margin: 1.5rem 0 1rem;
        }

        .doc-content p {
            margin-bottom: 1rem;
            line-height: 1.8;
        }

        .doc-content ul {
            margin-bottom: 1rem;
            padding-left: 1.5rem;
        }

        .doc-content li {
            margin-bottom: 0.5rem;
        }

        .doc-content code {
            background-color: #f3f4f6;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

        .doc-content pre {
            background-color: #1f2937;
            color: white;
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1rem 0;
        }

        .doc-content pre code {
            background-color: transparent;
            padding: 0;
            color: inherit;
        }

        .doc-content blockquote {
            border-left: 4px solid var(--primary-color);
            padding-left: 1rem;
            margin: 1rem 0;
            color: #4b5563;
        }

        .doc-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
        }

        .doc-content th,
        .doc-content td {
            border: 1px solid #e5e7eb;
            padding: 0.75rem;
            text-align: left;
        }

        .doc-content th {
            background-color: #f9fafb;
            font-weight: 600;
        }

        .doc-content tr:nth-child(even) {
            background-color: #f9fafb;
        }

        .doc-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1rem 0;
        }

        .doc-content .note {
            background-color: #eff6ff;
            border-left: 4px solid var(--primary-color);
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 8px 8px 0;
        }

        .doc-content .warning {
            background-color: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 8px 8px 0;
        }

        .doc-content .tip {
            background-color: #ecfdf5;
            border-left: 4px solid #10b981;
            padding: 1rem;
            margin: 1rem 0;
            border-radius: 0 8px 8px 0;
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
                max-width: 100%;
            }

            .nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav-container">
            <a href="../index.html" class="logo">全民健康平台</a>
            <div class="nav-links">
                <a href="../index.html">返回首页</a>
                <a href="#search">搜索</a>
                <a href="https://wiki.mediaicare.online/zh/%E7%94%A8%E6%88%B7%E6%89%8B%E5%86%8C/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%8C%BB%E7%96%97%E8%BD%AC%E8%AF%8A">Wiki</a>
                
            </div>
        </nav>
    </header>

    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3>入门指南</h3>
                <ul class="sidebar-links">
                    <li><a href="#introduction" class="active">平台介绍</a></li>
                    <li><a href="#quickstart">快速开始</a></li>
                    <li><a href="#installation">安装部署</a></li>
                    <li><a href="#configuration">基础配置</a></li>
                </ul>
            </div>

            <div class="sidebar-section">
                <h3>核心功能</h3>
                <ul class="sidebar-links">
                    <li><a href="#user-management">用户管理</a></li>
                    <li><a href="#health-records">健康档案</a></li>
                    <li><a href="#medical-services">医疗服务</a></li>
                    <li><a href="#data-analysis">数据分析</a></li>
                </ul>
            </div>

            <div class="sidebar-section">
                <h3>开发指南</h3>
                <ul class="sidebar-links">
                    <li><a href="#api-reference">API 参考</a></li>
                    <li><a href="#plugin-development">插件开发</a></li>
                    <li><a href="#customization">自定义开发</a></li>
                    <li><a href="#deployment">部署指南</a></li>
                </ul>
            </div>

            <div class="sidebar-section">
                <h3>最佳实践</h3>
                <ul class="sidebar-links">
                    <li><a href="#security">安全指南</a></li>
                    <li><a href="#performance">性能优化</a></li>
                    <li><a href="#maintenance">运维管理</a></li>
                    <li><a href="#troubleshooting">故障排除</a></li>
                </ul>
            </div>
        </div>
    </aside>

    <main class="main-content">
        <div class="doc-content">
            <h1>平台文档</h1>
            
            <section id="introduction">
                <h2>平台介绍</h2>
                <p>全民健康信息平台是一个开源的医疗健康信息化解决方案，旨在打造智慧医疗新生态。平台整合了健康档案管理、远程医疗、智能诊断等多个功能模块，为医疗机构和个人用户提供全方位的健康信息服务。</p>
                
                <div class="note">
                    <strong>提示：</strong> 本文档将帮助您快速了解和使用全民健康信息平台。如果您是首次使用，建议从"快速开始"章节开始阅读。
                </div>
            </section>

            <section id="quickstart">
                <h2>快速开始</h2>
                <p>本节将指导您快速部署和使用全民健康信息平台。</p>
                
                <h3>环境要求</h3>
                <ul>
                    <li>操作系统：Linux/Windows Server 2019+</li>
                    <li>数据库：MySQL 8.0+ / PostgreSQL 12+</li>
                    <li>Java 环境：JDK 17+</li>
                    <li>内存：8GB+</li>
                    <li>磁盘空间：100GB+</li>
                </ul>

                <h3>快速部署</h3>
                <pre><code># 下载最新版本
wget https://download.mediaicare.online/mcp-latest.zip

# 解压安装包
unzip mcp-latest.zip

# 进入安装目录
cd mcp

# 启动服务
./start.sh</code></pre>
            </section>

            <section id="installation">
                <h2>安装部署</h2>
                <p>本节详细介绍全民健康信息平台的安装部署流程。</p>

                <h3>安装步骤</h3>
                <ol>
                    <li>下载安装包</li>
                    <li>配置环境变量</li>
                    <li>初始化数据库</li>
                    <li>启动服务</li>
                    <li>验证安装</li>
                </ol>

                <div class="warning">
                    <strong>注意：</strong> 安装过程中请确保所有依赖服务都已正确配置并运行。
                </div>
            </section>

            <section id="configuration">
                <h2>基础配置</h2>
                <p>本节介绍平台的基础配置项。</p>

                <h3>配置文件</h3>
                <p>主要配置文件位于 <code>config/</code> 目录下：</p>
                <ul>
                    <li><code>application.yml</code> - 主配置文件</li>
                    <li><code>database.yml</code> - 数据库配置</li>
                    <li><code>security.yml</code> - 安全配置</li>
                </ul>

                <h3>配置示例</h3>
                <pre><code># application.yml
server:
  port: 8080
  context-path: /mcp

spring:
  application:
    name: mediaicare-platform
  profiles:
    active: prod</code></pre>
            </section>

            <section id="api-reference">
                <h2>API 参考</h2>
                <p>本节提供平台 API 的详细参考文档。</p>

                <h3>认证方式</h3>
                <p>平台使用 JWT 进行身份认证，所有 API 请求都需要在 Header 中携带 token：</p>
                <pre><code>Authorization: Bearer your-token-here</code></pre>

                <h3>接口列表</h3>
                <table>
                    <thead>
                        <tr>
                            <th>接口</th>
                            <th>方法</th>
                            <th>描述</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>/api/v1/users</td>
                            <td>GET</td>
                            <td>获取用户列表</td>
                        </tr>
                        <tr>
                            <td>/api/v1/health-records</td>
                            <td>POST</td>
                            <td>创建健康档案</td>
                        </tr>
                        <tr>
                            <td>/api/v1/medical-services</td>
                            <td>GET</td>
                            <td>获取医疗服务列表</td>
                        </tr>
                    </tbody>
                </table>
            </section>

            <section id="plugin-development">
                <h2>插件开发</h2>
                <p>本节介绍如何开发平台插件。</p>

                <h3>插件结构</h3>
                <pre><code>plugin/
├── src/
│   ├── main/
│   │   ├── java/
│   │   │   └── com/example/plugin/
│   │   │       ├── Plugin.java
│   │   │       └── config/
│   │   └── resources/
│   │       └── plugin.yml
└── pom.xml</code></pre>

                <div class="tip">
                    <strong>提示：</strong> 开发插件时请遵循平台的插件开发规范，确保插件的兼容性和安全性。
                </div>
            </section>
        </div>
    </main>

    <script>
        // 移动端侧边栏切换
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.querySelector('.sidebar');
            const toggleButton = document.createElement('button');
            toggleButton.innerHTML = '☰';
            toggleButton.style.cssText = `
                position: fixed;
                top: 1rem;
                right: 1rem;
                z-index: 1000;
                padding: 0.5rem;
                background: white;
                border: 1px solid #e5e7eb;
                border-radius: 4px;
                cursor: pointer;
                display: none;
            `;
            document.body.appendChild(toggleButton);

            toggleButton.addEventListener('click', () => {
                sidebar.classList.toggle('active');
            });

            // 响应式处理
            function handleResize() {
                if (window.innerWidth <= 768) {
                    toggleButton.style.display = 'block';
                } else {
                    toggleButton.style.display = 'none';
                }
            }

            window.addEventListener('resize', handleResize);
            handleResize();
        });
    </script>
</body>
</html> 